<template>
  <div class="score">
    <header>
        <van-icon name="arrow-left" @click="handleBack()" size="25"/>
        <span>积分</span>
    </header>
    <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/我的/u3340.png" alt="">
    <span class="text">当前<strong>{{store.userInfo.scores}}</strong>个积分</span>  
    <van-cell title="签到日历(十一月)" class="check">
        <van-switch v-model="checked" active-color="#55a034" size="22px" />
    </van-cell>
    <div class="backgound">
      <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/积分/u3598.png" alt="" class="img">
      <van-button round type="success" color="#55a034" class="btn">签到领积分</van-button>
    </div>

  </div>

</template>

<script>
import useUserStore  from '../../store/user'
import { ref } from 'vue';
  export default {
    name: 'scan',
    setup(){
      const store = useUserStore();
      const checked = ref(true);
      return{
        store,
        checked
      }
    },
    methods: {
      handleBack() {
        this.$router.back()
      },
    },
  }
</script>

<style lang="less" scoped>
    header{
      height: 44px;
      font-size: 16px;
      line-height: 44px;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 5px;
      background-color: white;
    }
    .score{
      position: relative;
    }
    .score img{
      width: 100%;
      height: 207px;
      position: absolute;
    }
    .score .check{
      position: absolute;
      top: 130px;
      left: 23px;
      width: 336px;
    }
    .text{

      position: absolute;
      font-size: 14px;
      color: white;
      top: 90px;
      left: 130px;
    }

    .text strong{
      font-size: 28px;
    }

    .score .img{
      width: 261px;
      height: 224px;
      position: absolute;
      left: 20px;
    }

    .score .backgound{
      width: 336px;
      height: 290px;
      background-color: white;
      position: absolute;
      top: 181px;
      left: 23px;
    }
    .score .backgound .btn{
      position: absolute;
      top: 240px;
      left: 90px;
      width: 131px;
      height: 30px;
    }
</style>
